<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>其他信息录入页面</title>
    <link href="css/app.css"  rel="stylesheet"  type="text/css"/>
    <link href="css/mui.min.css" rel="stylesheet"  type="text/css"/>
    <link href="css/style_new.css">
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
    	.mui-input-group{
    		width: 80%;
    	}
    	.mui-content{
    		margin-top: 50px;
            background-color: white;
    	}
    	.mui-input-row{
    		text-align: left;
    	}
    	.mui-content-padded{
			margin-top: 30px;
    	}
    	.mui-input-row [type=text]{
    		/*background-color: 	#FFFAF0;*/
    		width: 55%;
    		padding-left: 0px;
    		float: left;
    		font-size: 15px;
    	}

    	.mui-input-row [type=image]{
    		width: 25px;
    		height: 25px;
    		float: left;
    		margin-top: 5px;
    		margin-left: 5px;
    	}
    </style>
    <script type="text/javascript">
    	//手机号是否合法;
		  function isPoneAvailable(str) {
		  	if(str=="phone"){
		  		//获取到添加的手机号
		  		var phone=document.getElementById("phone").value;
		            var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
		            if (!myreg.test(phone)) {
		            	//alert("您输入的手机号格式不正确，请重新输入！");
		            	document.getElementById("phone_img").src="icon/no.png";
		                return false;
		            } else {
		            	document.getElementById("phone_img").src="icon/yes.png";
		            }
		  	}else if(str=="guardian_phone"){
		  		var guardian_phone=document.getElementById("guardian_phone").value;
		  			var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
		            if (!myreg.test(guardian_phone)) {
		            	//alert("您输入的手机号格式不正确，请重新输入！");
		            	document.getElementById("guardian_phone_img").src="icon/no.png";
		                return false;
		            } else {
		            	document.getElementById("guardian_phone_img").src="icon/yes.png";
		            }
		  	}else if(str=="guardian_phone2"){
		  		var guardian_phone2=document.getElementById("guardian_phone2").value;
		  			var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
		            if (!myreg.test(guardian_phone2)) {
		            	//alert("您输入的手机号格式不正确，请重新输入！");
		            	document.getElementById("guardian_phone_img2").src="icon/no.png";
		                return false;
		            } else {
		            	document.getElementById("guardian_phone_img2").src="icon/yes.png";
		            }
		  	}

		  }
		//身份证号合法性验证
		//支持15位和18位身份证号
		//支持地址编码、出生日期、校验位验证
		 function IdentityCodeValid() {
		 	//取到输入的值

		 	var idcard=document.getElementById("idcard").value;

            var city={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外 "};
            var tip = "";
            var pass= true;

            if(!idcard || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(idcard)){
                tip = "身份证号格式错误";
                document.getElementById("idcard_img").src="icon/no.png";
                pass = false;
            }

           else if(!city[idcard.substr(0,2)]){
                tip = "地址编码错误";
                document.getElementById("idcard_img").src="icon/no.png";
                pass = false;
            }
            else{
                //18位身份证需要验证最后一位校验位
                if(idcard.length == 18){
                    idcard = idcard.split('');
                    //∑(ai×Wi)(mod 11)
                    //加权因子
                    var factor = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ];
                    //校验位
                    var parity = [ 1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2 ];
                    var sum = 0;
                    var ai = 0;
                    var wi = 0;
                    for (var i = 0; i < 17; i++)
                    {
                        ai = idcard[i];
                        wi = factor[i];
                        sum += ai * wi;
                    }
                    var last = parity[sum % 11];
                    if(parity[sum % 11] != idcard[17]){
                        tip = "校验位错误";
                        document.getElementById("idcard_img").src="icon/no.png";
                        pass =false;
                    }
                }
                document.getElementById("idcard_img").src="icon/yes.png";
            }
            //if(!pass) alert(tip);
            return pass;
        }
		//现住址非空验证
		function notNull(str){
			if(str=="present_address"){
					var present_address=document.getElementById("present_address").value;
				if(null==present_address||""==present_address){
					//alert("您还未填写现居住地址");
					document.getElementById("address_img").src="icon/no.png";
					return false;
				}else{
					document.getElementById("address_img").src="icon/yes.png";
				}
			}else if(str=="guardian_name"){
				var guardian_name=document.getElementById("guardian_name").value;
				if(null==guardian_name||""==guardian_name){
					//alert("您还未填写监护人姓名");
					document.getElementById("guardian_img").src="icon/no.png";
					return false;
				}else{
					document.getElementById("guardian_img").src="icon/yes.png";
				}
			}else if(str=="guardian_guanxi"){
				var guardian_guanxi=document.getElementById("guardian_guanxi").value;
				if(null==guardian_guanxi||""==guardian_guanxi){
					document.getElementById("guardian_guanxi_img").src="icon/no.png";
					return false;
				}else{
					document.getElementById("guardian_guanxi_img").src="icon/yes.png";
				}

			}else if(str=="guardian_name2"){
				var guardian_name2=document.getElementById("guardian_name2").value;
				if(null==guardian_name2||""==guardian_name2){
					//alert("您还未填写监护人姓名");
					document.getElementById("guardian_img2").src="icon/no.png";
					return false;
				}else{
					document.getElementById("guardian_img2").src="icon/yes.png";
				}
			}else if(str=="guardian_guanxi2"){//追加第二条信息
				var guardian_guanxi2=document.getElementById("guardian_guanxi2").value;
				if(null==guardian_guanxi2||""==guardian_guanxi2){
					document.getElementById("guardian_guanxi_img2").src="icon/no.png";
					return false;
				}else{
					document.getElementById("guardian_guanxi_img2").src="icon/yes.png";
				}

			}

		}
		//所属社区是否选择
		function communityORguardian(str){
			if(str=="community"){
						var community=document.getElementById("community").value;
					if(""==community||null==community){
						document.getElementById("community_img").src="icon/no.png";
						//alert("您还未选择");
						return false;
					}else{
						document.getElementById("community_img").src="icon/yes.png";
					}
			}
			else if(str=="serviceObject"){
				var serviceObject=document.getElementById("serviceObject").value;
					if(""==serviceObject||null==serviceObject){
						document.getElementById("serviceObject_img").src="icon/no.png";
						//alert("您还未选择");
						return false;
					}else{
						document.getElementById("serviceObject_img").src="icon/yes.png";
					}
			}
			else if(str=="Street"){
				var Street=document.getElementById("Street").value;
					if(""==Street||null==Street){
						document.getElementById("Street_img").src="icon/no.png";
						//alert("您还未选择");
						return false;
					}else{
						document.getElementById("Street_img").src="icon/yes.png";
					}
			}

		}
		//完成检查所有 为空不能提交
		function checkAll_submit(){
			var phone_img=document.getElementById("phone_img").src;
			var address_img=document.getElementById("address_img").src;
			var Street_img=document.getElementById("Street_img").src;
			var community_img=document.getElementById("community_img").src;
			var idcard_img=document.getElementById("idcard_img").src;
			var serviceObject_img=document.getElementById("serviceObject_img").src;
			var guardian_img=document.getElementById("guardian_img").src;
			var guardian_phone_img=document.getElementById("guardian_phone_img").src;
			var guardian_guanxi_img=document.getElementById("guardian_guanxi_img").src;
			if(phone_img=="file:///android_asset/icon/yes.png"&&address_img=="file:///android_asset/icon/yes.png"&&Street_img=="file:///android_asset/icon/yes.png"&&community_img=="file:///android_asset/icon/yes.png"&&idcard_img=="file:///android_asset/icon/yes.png"&&serviceObject_img=="file:///android_asset/icon/yes.png"&&guardian_img=="file:///android_asset/icon/yes.png"&&guardian_phone_img=="file:///android_asset/icon/yes.png"&&guardian_guanxi_img=="file:///android_asset/icon/yes.png"){
				alert("可以提交");
				return true;
			}else{
				alert("不能提交");
			}
		}

		//追加信息

		var i=0;
		function add(){
			var str=""


			if(i<1){
				str+="<div id='myid2' style='border: 1px solid royalblue;background-color: #ffffcc;margin-top: 5px;'>"+
					"<div class='mui-input-row'>"+
						"<label>监护人姓名:</label>"+
						"<input type='text' placeholder='请输入监护人姓名' id='guardian_name2' onblur="+"notNull('guardian_name2')"+">"+
						"<input type='image' src='icon\bt.png' id='guardian_img2'/>"+
						"<hr style='width: 90%;'/>"+
					"</div>"+
					"<div class='mui-input-row'>"+
						"<label>监护人手机号:</label>"+
						"<input type='text' placeholder='请输入监护人手机号' id='guardian_phone2' onblur="+"isPoneAvailable('guardian_phone2')"+">"+
						"<input type='image' src='icon\bt.png' id='guardian_phone_img2'/>"+
						"<hr style='width: 90%;'/>"+
					"</div>"+
					"<div class='mui-input-row'>"+
						"<label>与监护人关系:</label>"+
						"<input type='text' placeholder='与监护人关系'id='guardian_guanxi2' onblur="+"notNull('guardian_guanxi2')"+">"+
						"<input type='image' src='icon\bt.png' id='guardian_guanxi_img2'/>"+
						"<hr style='width: 90%;'/>"+
					"</div>"+
					"<input type='button' value='删除本条监护人信息' id='button2' onclick="+"subtraction('button2')"+">"+
				"</div>";

				document.getElementById("add").innerHTML=str;
				i++;
			}else{
				alert("目前只能追加一条数据");
			}

		}
		//减去信息
		function subtraction(str){
			//获取父对象，id
			var parent_id=$("#"+str+"").parent().attr("id");
			document.getElementById(parent_id).remove();
			i--;

		}

    </script>
</head>
<body>
<header id="header" class="mui-bar mui-bar-nav">
    <h1 class="mui-title">其他信息</h1>
</header>
<div class="mui-content" align="center">
    <div class="mui-content-padded" style="margin: 5px;">
        <div class="mui-input-row" >
            <label>手机号:</label>
            <input type="text" id="phone" placeholder="请输入手机号" onblur="isPoneAvailable('phone')">
            <input type="image" id="phone_img" src="icon\bt.png" />
            <hr style="width: 90%;"/>
        </div>
        <div class="mui-input-row">
            <label>现住址:</label>
            <input type="text" id="present_address" placeholder="请输入现住址" onblur="notNull('present_address')">
            <input type="image" src="icon\bt.png" id="address_img"/>
            <hr style="width: 90%;"/>
        </div>
        <div class="mui-input-row">
            <label>所属街道:</label>
            <select id="Street" class="select" style="width: 55%;padding-left: 0px;float: left;font-size: 15px;" onblur="communityORguardian('Street')">
                <option value="">请选择</option>
                <option value="1">街道1</option>
                <option value="2">街道2</option>
                <option value="3">街道3</option>
                <option value="4">街道4</option>
                <option value="0">其他</option>
            </select>
            <input type="image" src="icon\bt.png" id="Street_img"/>
            <hr style="width: 90%;"/>
        </div>
        <div class="mui-input-row">
            <label>所属社区:</label>
            <select id="community" class="select" style="width: 55%;padding-left: 0px;float: left;font-size: 15px;" onblur="communityORguardian('community')">
                <option value="">请选择</option>
                <option value="1">社区1</option>
                <option value="2">社区2</option>
                <option value="3">社区3</option>
                <option value="4">社区4</option>
                <option value="0">其他</option>
            </select>
            <input type="image" src="icon\bt.png" id="community_img"/>
            <hr style="width: 90%;"/>
        </div>
        <div class="mui-input-row">
            <label>身份证号:</label>
            <input type="text" id="idcard" placeholder="130627199403253217" disabled="disabled" onblur="IdentityCodeValid()">
            <input type="image" id="idcard_img" src="icon\yes.png" />
            <hr style="width: 90%;"/>
        </div>
        <div class="mui-input-row">
            <label>服务对象:</label>
            <select id="serviceObject" class="select" style="width: 55%;padding-left: 0px;float: left;font-size: 15px;" onblur="communityORguardian('serviceObject')">
                <option value="">请选择</option>
                <option value="1">老人</option>
                <option value="2">残疾人</option>
                <option value="0">其他</option>
            </select>
            <input type="image" src="icon\bt.png" id="serviceObject_img"/>
            <hr style="width: 90%;"/>
        </div>
        <div class="mui-input-row addGuardian" align="center">
            <input type="button"value="追加一条监护人信息" onclick="add()"/>
        </div>

        <div id="myid1" style="border: 1px solid royalblue;background-color: #ffffcc;">
            <div class="mui-input-row">
                <label>监护人姓名:</label>
                <input type="text" placeholder="请输入监护人姓名" id="guardian_name" onblur="notNull('guardian_name')">
                <input type="image" src="icon\bt.png" id="guardian_img"/>
                <hr style="width: 90%;"/>
            </div>
            <div class="mui-input-row">
                <label>监护人手机号:</label>
                <input type="text" placeholder="请输入监护人手机号" id="guardian_phone" onblur="isPoneAvailable('guardian_phone')">
                <input type="image" src="icon\bt.png" id="guardian_phone_img"/>
                <hr style="width: 90%;"/>
            </div>
            <div class="mui-input-row">
                <label>与监护人关系:</label>
                <input type="text" placeholder="与监护人关系"id="guardian_guanxi" onblur="notNull('guardian_guanxi')">
                <input type="image" src="icon\bt.png" id="guardian_guanxi_img"/>
                <hr style="width: 90%;"/>
            </div>
        </div>

        <div id="add">

        </div>
    </div>
    <div class="mui-content-padded">
        <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" onclick="checkAll_submit()">完成</button>
    </div>
</div>
</body>
</html>